<template>
	<navbar title="视频列表" :isBack="true"></navbar>
	<view class="" style="padding: 30rpx;">
		<!-- <view class="" style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 36rpx;border-bottom: 1rpx solid #ECECEC;margin-bottom: 40rpx;">
				<view class="">
					01 | 握球杆姿势及注意事项
				</view>
				<view class="" style="color: #F00505;font-weight: bold;">
					免费
				</view>
				<image src="/static/image/lock-active.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view> -->
		<view class="" style="padding-bottom: 15rpx;border-bottom: 1rpx solid #E7E9EB;display: flex; margin-bottom: 15rpx;" v-for="item in list" @click="clickItem(item)">
			<view class="" style="width: 303rpx;height: 170rpx;border-radius: 10rpx;">
				<image :src="item.banner" mode="" style="width: 303rpx;height: 170rpx;border-radius: 10rpx;"></image>
			</view>
			<view class=""
				style="margin-left: 24rpx;height: 170rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="" style="font-size: 25rpx;">
					{{item.title}}
				</view>
				<view class="">
					<span class="" v-if="item.is_lock == 0"
						style="font-size: 18rpx;color: #FF8056;padding: 4rpx 12rpx;border: 1rpx solid #FF8056;border-radius: 10rpx;">
						免费
					</span>
					<span class="" v-if="item.is_lock == 1"
						style="font-size: 18rpx;color: #3F4780;padding: 4rpx 12rpx;border: 1rpx solid #3F4780;border-radius: 10rpx;">
						购买课程观看
					</span>
					<span class="" v-if="item.is_lock == 2"
						style="font-size: 18rpx;color: #FF8056;padding: 4rpx 12rpx;border: 1rpx solid #FF8056;border-radius: 10rpx;">
						已有{{item.views}}人观看
					</span>
					<view class=""  style="font-size: 24rpx;color: #999999;margin-top: 18rpx;">
						<span v-if="item.duration">视频时长：{{item.duration}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import { courseVideoList,addViews } from '@/service/api/index'
	import { ref } from 'vue'
import tools from '@/utils/tools';
	const course_id = ref('')
	const list = ref([]) as any
	onLoad((options) => {
		course_id.value = options.course_id
		getData()
	})

	const getData = async () => {
		const res = await courseVideoList({ id: course_id.value });
		list.value = res.msg;
	//	console.log(res);
	}
	const clickItem = async(item:any)=>{
		if(item.is_lock == '1'){
			tools.showToast('请购买课程后观看');
			return
		};
		const res = await addViews({id:item.id});
		tools.navTo('/pagesB/course/video?id=' + item.id);
	}
</script>

<style>
</style>